<template>
  <div>
    <div id="container" style="width: 100%; height: calc(100vh - 100px)">
    </div>
  </div>
</template>

<script>

var content = [
  "<div style='font-size: 14px; color: red; width: 200px; height: 50px'>这是信息窗口</div>"
];

export default {
  name: "Map",
  data() {
    return {

    }
  },
  // 页面加载前
  created() {

  },
  // 页面加载完后
  mounted() {

    // 创建地图实例
    var map = new AMap.Map("container", {
      zoom: 13,
      //初始化地图中心点
      center: [109.39651955578611, 24.277611034149384],
      // resizeEnable: true
    })

    // 创建 infoWindow 实例
    var infoWindow = new AMap.InfoWindow({
      anchor: 'top-left',
      content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
    });

    // 点击事件
    var clickHandler = function(e) {
      console.log('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
      // 打开信息窗体
      infoWindow.open(map,[109.39651955578611, 24.277611034149384]);
    };


// 绑定点击事件
    map.on('click', clickHandler);


    // 创建一个 Marker 实例：
    const marker = new AMap.Marker({
      position: new AMap.LngLat(109.39651955578611, 24.277611034149384),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      title: '柳州广电小区'
    });

    // 将创建的点标记添加到已有的地图实例：
    map.add(marker);

    // path 是驾车导航的起、途径和终点，最多支持16个途经点
    var path = []

    path.push([109.39651955578611, 24.277611034149384])
    path.push([109.392491,24.288655])
    path.push([109.537191,24.403361])


    map.plugin('AMap.DragRoute', function () {

      var route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE)
      // 查询导航路径并开启拖拽导航
      route.search()
    })
    var polyLine = new AMap.Polyline({
      path: path,
      strokeWeight: 5,
      borderWeight: 5, // 线条宽度，默认为 1
      strokeStyle: "solid",
      strokeColor: '#DC143C', // 线条颜色
      lineJoin: 'round' // 折线拐点连接处样式
    })
    map.add(polyLine)

  },

  methods:{

  }
}
</script>

<style scoped>

</style>